﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Picker</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link href="../../../../src/ui/calendar/datepicker/default.css" rel="stylesheet" type="text/css" />
	<style>
		#relative
		{
			margin: 200px 0 0 300px;
		}
		#relative a
		{
			padding: 5px 10px;
		}
	</style>
</head>
<body>
	<h1>
		Position the Picker</h1>
	<p>
		Clicking on one of the links should position the Picker at the top, right, bottom
		or left of the element.<br />
		The picker will have a offset of {x: 20, y: 10}. If the position is at the top,
		the offset should be to the top, just like the x offset when the picker is positioned
		on the left.
	</p>
	<p>
		<a href="#" id="open">Open</a> <a href="#" id="close">Close</a> <a href="#" id="toggle">
			Toggle</a>
		<select id="picker">
			<option value="1">1</option>
			<option value="2">2</option>
		</select>
	</p>
	<div id="relative">
		<a href="#">Top</a> <a href="#">Right</a> <a href="#">Bottom</a> <a href="#">Left</a>
	</div>
	<script type="text/javascript" charset="utf-8" src="../../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../../src/';</script>
	<script type="text/javascript" charset="utf-8" src="../../../../src/demo/action/ui/calendar/datepicker/pickerposition.js"></script>
	<script type="text/javascript">
		var myPicker, pickers = {};
	</script>
</body>
</html>
